import React, { useState } from 'react'

export default function App() {
    const [uName, setuName] = useState('张三')
    const [age, setAge] = useState(18)
    const [useInfo, setUseInfo] = useState({
        name: '李四',
        age: 20
    })
    // 可以修改
    const change1 = () => {
        setUseInfo({
            name: 'aaa'
        })
    }
    // 可以修改
    const change2 = () => {
        setUseInfo({
            ...useInfo,
            name: 'aaa'
        })
    }
    // 无法修改，因为对象内存地址未改变
    const change3 = () => {
        setUseInfo(Object.assign(useInfo, { name: 123 }))
    }

    return (
        <>
            <div>{age}</div>
            <div>{uName}</div>
            <hr />
            <div>
                <span>{useInfo.name}</span> - <span>{useInfo.age}</span>
            </div>
            <button onClick={change1}>点我修改个人信息1</button>
            <button onClick={change2}>点我修改个人信息2</button>
            <button onClick={change3}>点我修改个人信息3</button>
        </>
    )
}
